import { useNavigate } from 'react-router';
import { Table, message, Button, Pagination,Popconfirm} from 'antd';
import type { ColumnsType } from 'antd/lib/table';

// 引入less
import '../../static/css/audit/audit.css'
import { useEffect, useState } from 'react';
import type { PaginationProps } from 'antd';
// 引入二次封装的接口
import list from '../../apis/audit/list'
import { del } from '../../apis/audit/deta'
interface DataType {
    page: number;
    pageSize: number
    key?: React.Key;
    username?: string;
    v_id?: number;
    mobile?: number;
    carnumber?: string;
    addtime?: any;
    status?: string;
    address?: any;
}

var total = 0
const showTotal: PaginationProps['showTotal'] = total => `共有 ${total} 条数据`;
const List: React.FC = (): JSX.Element => {
    // 删除按钮
    const dels: any = (ids: any) => {
        return async () => {
           
        }
    }
    // 是否确认删除
    const confirm:any = (e: React.MouseEvent<HTMLElement>) => {
        return async ()=>{
            const res: any = await del({ logid: e })
            if (res.code == '00000') {
                message.success('确定');
                Info()
            } else {
                message.error(res.msg, 2)
            }
        }
    };

    const cancel:any = (e: React.MouseEvent<HTMLElement>) => {
        console.log(e);
        message.error('取消');
    };
    const navigate = useNavigate()
    const columns: ColumnsType<DataType> = [
        {
            title: '审核人',
            dataIndex: 'username',
        },
        {
            title: '来访人',
            dataIndex: 'visitor',
        },
        {
            title: '来访人电话',
            dataIndex: 'mobile',
        },
        {
            title: '来访人车牌号',
            dataIndex: 'carnumber',
        },
        {
            title: '审核时间',
            dataIndex: 'addtime',
        },
        {
            title: '审核状态',
            dataIndex: 'status',
            render: (text) => (text == 3 ? <Button className='t'>终审通过</Button> : text == 2 ? <Button>待终审</Button> : <Button>终身拒绝</Button>)
        },
        {
            title: '操作',
            dataIndex: 'logid',
            render: (text: any, record: any): any => (<div>
                <Popconfirm
                    title="是否确认删除"
                    onConfirm={confirm(record.logid)}
                    onCancel={cancel}
                    okText="Yes"
                    cancelText="No"
                >
                    <Button className='deta'>删除</Button>
                </Popconfirm>
                <Button onClick={todea(text)} className='deta'>详情</Button></div>)
        },
    ]

    const todea = (id: any) => {
        return () => {
            // console.log(id)
            navigate('/audit/deta/?id=' + id)
        }

    }
    const [params, setP]: any = useState<DataType>({ page: 1, pageSize: 5 })
    const [info, setI]: any = useState([])
    // 分页
    const onChange = (page: number, pageSize: number) => {
        setP({ ...params, page: page, pageSize: pageSize })
    }
    // 列表
    const [curpage,setC] = useState()
    const Info = async () => {
        const res: any = await list(params)
        console.log(res)
        if (res.code == '00000') {
            setI(res.data)
            total = res.total
            setC(res.current_page)
        } else {
            message.error(res.msg, 2);
        }
    }
    useEffect(() => {
        Info()
    }, [params])
    return (
        <div style={{ backgroundColor: '#fff' }}>
            <div className='tabs'>
                <Table rowKey='logid' columns={columns} bordered dataSource={info} pagination={false} />
                <div className='Paging'>
                    <Pagination current={curpage} total={total} showTotal={showTotal} showQuickJumper defaultPageSize={5} pageSizeOptions={['5', '10', '15', '20']} defaultCurrent={1} onChange={onChange} />
                </div>
            </div>
        </div>
    )
}
export default List